<template>
  <div ref="wrapper" class="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent,  onMounted,watchEffect, ref,toRefs} from 'vue'
import BScroll from 'better-scroll'

export default defineComponent({
  props: {
    probeType:{
      type:Number,
      default:0
    },
     pullUpLoad:{
      type:Boolean,
      default: false
    },
    pullDownRefresh:{
       type:Boolean,
       default: false
    },
    topBounce:{
      type:Boolean,
      default:true
    }
  },
  emits: ['scroll','pullingUp','pullingDown'],
  components: {

  },
  setup(props, { emit }) {
    const probeTypeFlag=ref(props.probeType)
    const pullUpLoadFlag=ref(props.pullUpLoad)
    const pullDownRefreshFlag=ref(props.pullDownRefresh)
    const topBounceFlag=ref(props.topBounce)
    const wrapper=ref(null)
    const bs=ref(null)
    onMounted(() => {
    bs.value = new BScroll(wrapper.value, {
        scrollY: true,
        mouseWheel: true,
        click: true,
        taps: true,
        disableMouse: false,
        disableTouch: false,
        probeType:probeTypeFlag.value,
        pullUpLoad:pullUpLoadFlag.value,
        pullDownRefresh: pullDownRefreshFlag.value,
        bounce: {
 	      	top: topBounceFlag.value,
 	      }
      })
      bs.value.on('scroll', (position) => {
        emit('scroll',position)
      })
      pullUpLoadFlag.value&&bs.value.on('pullingUp',()=>{
        console.log('上拉加载');
        emit('pullingUp')
        // bs.value.finishPullUp()
      })

       pullDownRefreshFlag.value&&bs.value.on('pullingDown',()=>{
        console.log('下拉加载');
        emit('pullingDown')
        // bs.value.finishPullDown()
      })

  })

      const refresh=() =>{
        console.log('bs内部刷新啦');
          bs.value&&bs.value.refresh();
      }

      const scrollTo=(x, y, time=600)=>{
          bs.value&&bs.value.scrollTo(x,y,time)
      }

      const finishPullUp=()=>{
         bs.value&&bs.value.finishPullUp();
      }

      watchEffect(()=>{
        console.log('bs内部执行watchEffect刷新');
        bs.value&&bs.value.refresh()
      })

    return {
      wrapper,
      bs,
      refresh,
      scrollTo,
      topBounceFlag,
      finishPullUp,


    }

  }
})
</script>

<style scoped lang="less">
.wrapper {
  .content {
  
    // padding-bottom: 4vh;
  }
}
</style>
